<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>消息通知</span>
          <el-button 
            v-if="unreadMessages.length > 0" 
            type="primary" 
            size="small"
            @click="markAllAsRead"
          >
            全部标记为已读
          </el-button>
        </div>
      </template>
      
      <div v-if="allMessages.length === 0" class="empty-state">
        <el-empty description="暂无消息" />
      </div>
      
      <div v-else class="message-list">
        <div 
          v-for="message in allMessages" 
          :key="message.id"
          class="message-item"
          :class="{ 'unread': !message.isRead }"
        >
          <div class="message-content">
            <div class="message-header">
              <span class="message-type">{{ getMessageTypeText(message.type) }}</span>
              <span class="message-time">{{ formatTime(message.receivedAt) }}</span>
              <el-tag v-if="!message.isRead" type="danger" size="small">未读</el-tag>
              <el-tag v-else type="success" size="small">已读</el-tag>
            </div>
            <div class="message-body">
              {{ message.content }}
            </div>
          </div>
          <div class="message-actions">
            <el-button 
              v-if="!message.isRead"
              type="primary" 
              size="small"
              @click="markAsRead(message)"
            >
              标记已读
            </el-button>
            <el-button 
              type="danger" 
              size="small"
              @click="deleteMessage(message)"
            >
              删除
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()

// 计算属性
const allMessages = computed(() => {
  return [...userStore.unreadMessages].sort((a, b) => 
    new Date(b.receivedAt) - new Date(a.receivedAt)
  )
})

const unreadMessages = computed(() => {
  return userStore.unreadMessages.filter(msg => !msg.isRead)
})

// 方法
const getMessageTypeText = (type) => {
  const typeMap = {
    'admin': '系统通知',
    'user': '用户消息',
    'system': '系统消息'
  }
  return typeMap[type] || '未知类型'
}

const formatTime = (time) => {
  if (!time) return ''
  const date = new Date(time)
  const now = new Date()
  const diff = now - date
  
  if (diff < 60000) { // 1分钟内
    return '刚刚'
  } else if (diff < 3600000) { // 1小时内
    return `${Math.floor(diff / 60000)}分钟前`
  } else if (diff < 86400000) { // 24小时内
    return `${Math.floor(diff / 3600000)}小时前`
  } else {
    return date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
  }
}

const markAsRead = (message) => {
  userStore.markMessageAsRead(message.id, message.timestamp)
  ElMessage.success('已标记为已读')
}

const markAllAsRead = () => {
  unreadMessages.value.forEach(message => {
    userStore.markMessageAsRead(message.id, message.timestamp)
  })
  ElMessage.success('已全部标记为已读')
}

const deleteMessage = (message) => {
  ElMessageBox.confirm('确定要删除这条消息吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.deleteMessage(message.id, message.timestamp)
    ElMessage.success('消息已删除')
  }).catch(() => {
    // 用户取消删除
  })
}
</script>

<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.empty-state {
  text-align: center;
  padding: 40px 0;
}

.message-list {
  .message-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.3s;
    
    &:hover {
      background-color: #f8f9fa;
    }
    
    &.unread {
      background-color: #f0f9ff;
      border-left: 4px solid #409eff;
    }
    
    &:last-child {
      border-bottom: none;
    }
  }
  
  .message-content {
    flex: 1;
    
    .message-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;
      
      .message-type {
        font-weight: 600;
        color: #409eff;
      }
      
      .message-time {
        font-size: 12px;
        color: #909399;
      }
    }
    
    .message-body {
      color: #606266;
      line-height: 1.5;
    }
  }
  
  .message-actions {
    margin-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    
    @media (min-width: 768px) {
      flex-direction: row;
      gap: 8px;
    }
  }
}
</style>